<template>
  <section class="sys-layout" :class="{'is-fit': fit}">
    <section class="sys-layout-top" v-if="$slots.top">
      <slot name="top"></slot>
    </section>
    <section class="sys-layout-main">
      <slot></slot>
    </section>
    <section class="sys-layout-bottom">
      <slot name="bottom"></slot>
    </section>
  </section>
</template>

<script>
export default {
  name: 'sys-layout',
  cnName: '上下简单布局',
  props: {
    fit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
  .sys-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    &.is-fit {
      height: 100%;
    }

    &-top {
      box-sizing: border-box;
    }

    &-main {
      flex: 1;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
</style>
